<template>
  <div class="app-container home">
    <div class="head">
      <h3>系统对接</h3>
      <span @click="getList">刷新</span>
    </div>
    <el-form :model="queryParams"
             ref="queryForm"
             size="small"
             :inline="true"
             v-show="showSearch"
             label-width="68px">

      <el-form-item style="width:300px; padding-left: 30px"
                    v-if="isShow">
        <el-input style="width: 250px"
                  v-model="queryParams.deptName"
                  placeholder="所属医院"
                  clearable />
      </el-form-item>

      <el-form-item style="width:300px; padding-left: 30px"
                    v-if="isShow">
        <el-input style="width: 250px"
                  v-model="queryParams.sampleCaseId"
                  placeholder="病例号"
                  clearable />
      </el-form-item>

      <el-form-item style="width:300px; padding-left: 30px">
        <el-input style="width: 250px"
                  v-model="queryParams.patientName"
                  placeholder="姓名"
                  clearable />
      </el-form-item>

      <el-form-item style="width:300px; padding-left: 30px"
                    v-if="isShow">
        <el-input style="width: 250px"
                  v-model="queryParams.payDate"
                  placeholder="支付日期"
                  clearable />
      </el-form-item>
      <el-form-item style="width:300px; padding-left: 30px"
                    v-if="isShow">
        <el-input style="width: 250px"
                  v-model="queryParams.createTime"
                  placeholder="创建日期"
                  clearable />
      </el-form-item>


      <el-form-item>
        <el-button type="primary"
                   icon="el-icon-search"
                   size="mini"
                   @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh"
                   size="mini"
                   @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-col :span="24"
            :xs="24">
      <el-table v-loading="loading"
                :data="dataList"
                width="150px"
                style="height:calc(100vh - 280px)">

        <el-table-column label="操作"
                         align="center"
                         class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini"
                       icon="el-icon-warning"
                       style="background-color: #fff; border-color: #fff; color: #aa2290;padding:4px 6px;"
                       v-hasPermi="['check:patient:query']"
                       @click="details(scope.row)">详情</el-button>
          </template>
        </el-table-column>

        <el-table-column label="所属医院"
                         align="center"
                         width="150"
                         prop="deptName" />

        <el-table-column label="病例号"
                         align="center"
                         prop="sampleCaseId" />

        <el-table-column label="受检人姓名"
                         align="center"
                         prop="patientName" />

        <el-table-column label="受检人性别"
                         align="center"
                         prop="patientSex" >

        </el-table-column>

        <el-table-column label="受检人电话"
                         align="center"
                         prop="patientPhone" />

        <el-table-column label="年龄"
                         align="center"
                         prop="patientAge" />

        <el-table-column label="配偶姓名"
                         align="center"
                         prop="otherName" />

        <el-table-column label="配偶电话"
                         align="center"
                         prop="otherPhone" />

        <el-table-column label="临床诊断"
                         align="center"
                         prop="clinicalRemark" />

        <el-table-column label="样本明细"
                         align="center"
                         prop="mateName" />

        <el-table-column label="检测进度"
                         align="center"
                         prop="mateName" >
          <template slot-scope="scope">
<!--            <el-progress type="line" :percentage="scope.row.progress"-->
<!--                         :width="120"  :stroke-width="15" :text-inside="true"></el-progress>-->
          </template>
        </el-table-column>

        <el-table-column label="附件"
                         align="center"
                         prop="mateName" />

        <el-table-column label="报告链接"
                         align="center"
                         prop="reportUrl" >
          <template slot-scope="scope">
            <el-link type="primary" underline :href="scope.row.reportUrl" target="_blank"
                     v-if="scope.row.reportUrl!=undefined&&scope.row.reportUrl!=null">
              <i class="el-icon-download"></i>
              <span>下载报告</span>
            </el-link>
          </template>
        </el-table-column>

        <el-table-column label="创建时间"
                         align="center"
                         prop="createTime" />

        <el-table-column label="支付时间"
                         align="center"
                         prop="payDate" />

        <el-table-column label="交易流水号"
                         align="center"
                         prop="tradeId" />

        <el-table-column label="知情同意书"
                         align="center"
                         prop="mateName" />

        <el-table-column label="电子送检单"
                         align="center"
                         prop="reportUrl" />
      </el-table>
      <pagination v-show="total>0"
                  :total="total"
                  :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getList" />
    </el-col>

    <detail-tab-info ref="detailTabInfoRef"></detail-tab-info>
  </div>
</template>

<script>
import { listHcMainOrder } from "@/api/systemIntegration/hcMainOrder";
import DetailTabInfo from './detail/detailTabInfo'

export default {
  name: "HcData",
  components: { DetailTabInfo },
  data () {
    return {
      isShow:false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 患者表格数据
      dataList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        patientName: undefined,
        sampleCaseId: undefined,
        deptName: undefined,
        createTime: undefined,
        payDate: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created () {
    var isRegister = this.$store.state.user.isRegister;
    if (isRegister == null || isRegister == 0) {//代表后台
      this.isShow = true;
    } else {
      this.isShow = false;
    }
    this.getList();
  },
  methods: {
    handleSelectable (row) {
      if (row.sjys == this.$store.state.user.nickName) {
        return true;
      } else {
        return false;
      }
    },
    details (row) {
      this.$refs.detailTabInfoRef.show(row)
    },

    /** 查询患者列表 */
    getList () {
      this.loading = true;
      listHcMainOrder(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset () {
      this.form = {
        id: null,
        searchValue: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.queryParams.patientName = undefined
      this.queryParams.sjdwName = undefined
      this.handleQuery();
    },
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  padding: 18px 21px 0 21px;
}
.home {
  width: 100%;
  height: calc(100% - 50px);
}
</style>
